<template>
  <div class="" id="shopp-manager" v-loading="spinShow">
    <pages-header
        ref="pageHeader"
        title="编辑算法参数"
        :backUrl="this.$routeProStr + '/algorithm/algorithm'"
    ></pages-header>
    <el-card :bordered="false" shadow="never" class="mt16" :body-style="{ padding: '0 20px 20px' }">
      <el-form
          class="algorithmData mt20"
          ref="algorithmData"
          :rules="ruleValidate"
          :model="algorithmData"
          :label-width="labelWidth"
          :label-position="labelPosition"
          @submit.native.prevent
      >
        <!-- 规格库存-->
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="算法名称：" prop="name">
              <el-input v-model.trim="algorithmData.name" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="算法描述：" prop="name">
              <el-input type="textarea" v-model.trim="algorithmData.description" readonly/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="接口地址：" prop="name">
              <el-input v-model.trim="algorithmSetting.api_path"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="noForm">
            <!-- 参数配置设置-->
            <el-form-item label="参数配置：" class="labeltop">
              <el-button @click="addParam" style="margin-bottom: 10px;">添加参数</el-button>
              <el-table :data="manyFormValidate" border>
                <el-table-column
                    :label="item.label"
                    :width="item.width"
                    v-for="(item, index) in paramHeader"
                    :key="index"
                >
                  <template slot-scope="scope">
                    <template v-if="item.slot === 'field'">
                      <el-input type="input" placeholder="请输入字段" v-model="manyFormValidate[scope.$index].field" ></el-input>
                    </template>
                    <template v-else-if="item.slot === 'field_text'">
                      <el-input type="input" placeholder="请输入字段标识" v-model="manyFormValidate[scope.$index].field_text" ></el-input>
                    </template>
                    <template v-else-if="item.slot === 'data_type'">
                      <el-select v-model="manyFormValidate[scope.$index].data_type" clearable placeholder="请选择">
                        <el-option
                            v-for="item in dataTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                      </el-select>
                    </template>
                    <template v-else-if="item.slot === 'required'">
                      <el-switch
                          v-model="manyFormValidate[scope.$index].required"
                          active-text="必填"
                          inactive-text="非必填">
                      </el-switch>
                    </template>
                    <template v-else-if="item.slot === 'default_value'">
                      <el-input type="input" placeholder="请输入默认值" v-model="manyFormValidate[scope.$index].default_value" ></el-input>
                    </template>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="60">
                  <template v-slot="scope">
                    <a @click="delAttrTable(scope.$index)">删除</a>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button
              type="primary"
              :disabled="openSubimit"
              class="submission"
              @click="handleSubmit('algorithmData')"
          >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import vuedraggable from 'vuedraggable';
import {
  algorithmInfoApi,
  algorithmSettingEditApi,
} from '@/api/algorithm';
import { getCookies } from '@/libs/util';

export default {
  name: 'algorithm_editParams',
  components: {
    // VueUeditorWrap,
    draggable: vuedraggable,
  },
  data() {
    return {
      content: '',
      header: {},
      type: 0,
      modals: false,
      spinShow: false,
      openSubimit: false,
      // 规格数据
      paramHeader: [
        {
          'label': '数据类型',
          'slot': 'data_type',
          'width': 140,
        },
        {
          'label': '字段',
          'slot': 'field',
          'width': 'auto',
        },
        {
          'label': '字段说明',
          'slot': 'field_text',
          'width': 'auto',
        },
        {
          'label': '默认值',
          'slot': 'default_value',
          'width': 'auto',
        },
        {
          'label': '是否必填',
          'slot': 'required',
          'width': 150,
        },
      ],
      dataTypeOptions: [
        {
          value: 'text',
          label: '文本'
        },
        {
          value: 'image',
          label: '单图片'
        },
        {
          value: 'multi-image',
          label: '多图片'
        },
        {
          value: 'file',
          label: '文件'
        },
      ],
      algorithmData: {},
      algorithmSetting: {},
      manyFormValidate: [],
      loading: false,
      template: false,
      ruleValidate: {
        name: [{ required: true, message: '请输入算法名称', trigger: 'blur' }],
      },
    };
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : '120px';
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'right';
    },
    labelBottom() {
      return this.isMobile ? undefined : '15px';
    },
  },
  created() {
    this.getToken();
  },
  mounted() {
    if (this.$route.params.id !== '0' && this.$route.params.id) {
      this.getInfo();
    }
    if (this.$route.query.type) {
      this.modals = true;
      this.type = this.$route.query.type;
    } else {
      this.type = 0;
    }
  },
  methods: {
    // 上传头部token
    getToken() {
      this.header['Authori-zation'] = 'Bearer ' + getCookies('token');
    },
    getEmptyParam() {
      let emptyParam = {};
      this.paramHeader.forEach((item) => {
        emptyParam[item.slot] = null;
      })
      return emptyParam;
    },
    addParam() {
      this.manyFormValidate.push(this.getEmptyParam());
    },
    // 初始化数据展示
    infoData(data, isCopy) {
      this.algorithmData = data;
      this.algorithmSetting = data.setting;
      this.manyFormValidate = this.algorithmSetting.config;
    },
    // 删除表格中的属性
    delAttrTable(index) {
      this.manyFormValidate.splice(index, 1);
    },
    // 详情
    getInfo() {
      let that = this;
      that.spinShow = true;
      algorithmInfoApi(that.$route.params.id)
          .then(async (res) => {
            let data = res.data;
            // 临时处理方案
            this.infoData(data);
            this.spinShow = false;
          })
          .catch((res) => {
            this.spinShow = false;
            this.$message.error(res.msg);
          });
    },
    // 提交
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.algorithmSetting.config = this.manyFormValidate;
          if (this.openSubimit) return;
          this.openSubimit = true;
          algorithmSettingEditApi(this.algorithmSetting.id, this.algorithmSetting)
              .then(async (res) => {
                this.openSubimit = false;
                this.$message.success(res.msg);
              })
              .catch((res) => {
                setTimeout((e) => {
                  this.openSubimit = false;
                }, 1000);
                this.$message.error(res.msg);
              });
        } else {
          if (!this.algorithmData.api_path) {
            return this.$message.warning('病种信息-病种名称不能为空');
          }
        }
      });
    },
    // 表单验证
    validate(prop, status, error) {
      if (status === false) {
        this.$message.warning(error);
      }
    },
  },
};
</script>
<style scoped lang="stylus">
</style>